{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>题库管理</title>
<style type="text/css">
    .mui-control-content {
        background-color: #efeff4;
        height: 100%;
    }
    .mui-table-view .mui-media-body{ overflow: visible;}
    .mui-scroll-wrapper,.mui-scroll{ position: relative !important;}
    .mui-segmented-control{ border-radius: 30px;}
    .mui-segmented-control .mui-control-item{ line-height: 40px;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content" id="mb-del">
    <div id="slider" class="mui-slider mb-count">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mb-control-item mui-active" href="#item1mobile">
                公共题库
            </a>
            <a class="mui-control-item mb-control-item" href="#item2mobile">
                个人题库
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <!--单选题-->
                <div class="mui-card">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                            <a href="arrhomework4"><span>[单选题]</span>朱自清的《春》中有“小草儿也青逼你的眼”这样一句，对其中的“逼”字的意思理解正确的一项是（ ）。
                                <div class="mb-subjects">
                                    <p>A.强迫（你去看那小草）</p>
                                    <p>B.说小草的颜色青得使人不能不注意它，极言小草色青。</p>
                                    <p>C.小草靠近了人的眼睛。</p>
                                    <p>D.小草还很狭窄。</p>
                                </div>
                            </a>
                            <form  class="mui-input-group" action="">
                                <div class="mui-input-row mui-checkbox mb-sub-row">
                                    <label class="mb-box tasks-box">难度 2.7</label>
                                    <input name="addbtn" type="button" value="加入私库">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                {{ message }}
                {%for item in data.list%}

                <div class="mui-card">
                    <div class="mui-card-content">
                        <div class="mui-card-content-inner">
                            <a href="arrhomework4"><span>[单选题]</span>
                                {{item.content}}
                                <div class="mb-subjects">
                                    {%for item2 in item.choiceDTOs%}
                                    <p>{{item2.serialNumber}}.{{item2.content}}</p>
                                    {%endfor%}
                                </div>
                            </a>
                            <form action="">
                                <div class="mui-input-row mui-checkbox mb-sub-row">
                                    <label class="mb-box tasks-box">难度 {{item.serialNumber}}</label>
                                </div>
                                <button type="button" class="mb-delete" data-id="{{item.id}}"><i class="iconfont icon-shanchu"></i></button>
                            </form>
                        </div>
                    </div>
                </div>

                {%endfor%}
            </div>
        </div>
    </div>
</div>

<!--布置作业按钮-->
<!--<div class="mb-arr-homework">-->
    <!--<a href="addtask">增加题库</a>-->
<!--</div>-->
{% endblock %}

{#js代码#}
{% block js %}
<script>
    //公共题库、个人题库 选项卡切换
    (function($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: true //是否显示滚动条
        });
        var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
                //force repaint
                sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
            }
        });

        //删除私有题目
        $('#mb-del').on('tap', '.mb-delete', function() {
            var elem = this;
            var mbcard = elem.parentNode.parentNode.parentNode.parentNode;

            mui.confirm('确认删除该条记录？', '删除', btnArray, function(e) {
                if (e.index == 0) {
                    mbcard.parentNode.removeChild(mbcard);
                    console.log(elem);
                    console.log(elem.attributes["data-id"].nodeValue);
                    mui.post("/tasks",{
                        id:elem.attributes["data-id"].nodeValue,
                    },function (data){
                        if(data.code != 200){
                            mui.toast('删除失败');
                        }else{
                            mui.toast('删除成功');
                        }
                    });
                } else {
                    setTimeout(function() {
                        $.swipeoutClose(mbcard);
                    }, 0);
                }
            });
        });
        var btnArray = ['确认', '取消'];
    })(mui);

    var data = $("#item2mobile").html();
    var data1 = data.replace(/&lt;/g,'<');
    var data2 = data1.replace(/&gt;/g,'>');
    $("#item2mobile").html(data2);

</script>
<script>
    var page = 2, //分页码
        timers=100,
        onoff = true;
    // 加载数据
    var LoadingData = function() {
        mui.ajax('/taskpaging', {
                data: {
                    pageNo: page
                },
                dataType: 'json',
                type: 'get',
                async: false,
                success: function (data) {
                    if (data.code != 200) {
                        console.log('获取题库失败');
                        mui.toast(data.message);
                    } else {
                        if (page > data.data['totalPage']) {
                            onoff = false;
                            return mui.toast('没有更多题库.....');
                        }
                        console.log(page);
                        console.log(data);
                        var contentdata = data.data['list'];
                        console.log(contentdata);
                        //内容开始
                        var box = '';
                        var contentdiv1 = '<div class="mui-card"><div class="mui-card-content"><div class="mui-card-content-inner"><a href="arrhomework4"><span>[单选题]</span>';
                        var contentdiv2 = '<div class="mb-subjects">';
                        var contentform = '<form action="">';
                        var contentdiv3 = '<div class="mui-input-row mui-checkbox mb-sub-row"><label class="mb-box tasks-box">难度 ';
                        var contenbutton = '<button type="button" class="mb-delete" data-id="{{item.id}}"><i class="iconfont icon-shanchu"></i></button>';

                        for (var i = 0; i < contentdata.length; i++) {
                            //创建盒子
                            box += contentdiv1 + contentdata[i]['content'] + contentdiv2 ;
                            for(var j=0;j<contentdata[i]['choiceDTOs'].length;j++){
                                box += '<p>'+contentdata[i]['choiceDTOs'][j]['serialNumber']+'.'+contentdata[i]['choiceDTOs'][j]['content'] +'</p>';
                            }
                            box += '</div></a>' + contentform + contentdiv3 + contentdata[i]['serialNumber'] +'</label></div>'
                                + contenbutton + '</form></div></div></div>';
                        }
                        var contentbox = $('#item2mobile');
                        contentbox.append(box);
                        if (page == data.data['totalPage']) {
                            onoff = false;
                            return mui.toast('没有更多题库.....');
                        }
                        page++;
                    }
                }
            }
        );
    };

    $(document).scroll(function() {
        //console.log($(document).scrollTop());
        if($(document).scrollTop()>=$(document).height()-$(window).height()-300){
            if(onoff) {
                // clearTimeout(timers);
                // timers = setTimeout(function () {
                //     LoadingData();
                // }, 500);
                LoadingData();
            }
        }
    });
</script>
<!--flotdemo-->
{% endblock %}
